<template>
    <a-form :form="form" @submit="handleSubmit">
        <!-- 用户名 -->
        <a-form-item>
            <a-input size="large" type="text" placeholder="用户名" autocomplete="off"
                     v-decorator="[
                        'username',
                        {rules: [{ required: true, message: '请输入用户名或手机号码' }]}
                    ]">
                <a-icon slot="prefix" type="user" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 密码 -->
        <a-form-item>
            <a-input size="large" type="password" autocomplete="off" placeholder="密码"
                     v-decorator="[
                        'password',
                        {rules: [{ required: true, message: '请输入密码' }]}
                    ]">
                <a-icon slot="prefix" type="lock" :style="{ color: 'rgba(0,0,0,.25)' }"/>
            </a-input>
        </a-form-item>
        <!-- 登陆按钮 -->
        <a-form-item>
            <a-button size="large" type="primary" htmlType="submit" block>登录</a-button>
        </a-form-item>
        <!-- 其他选项 -->
        <a-form-item style="margin-bottom: 0;text-align: right;">
            <router-link :to="{ name : 'register',query : { callback: encodeURI($route.fullPath) } }">注册新账号</router-link>
            <!--<a-divider type="vertical" />-->
            <!--<router-link :to="{ path : '/register' }">忘记密码</router-link>-->
        </a-form-item>
    </a-form>
</template>

<script>
    import { login,getMyInfo } from '../../../apis/index';
    export default {
        data(){
            return {
                form : this.$form.createForm(this),
            };
        },
        props : {
            callback : { type : String, required : true }
        },
        methods : {
            handleSubmit : function(e) {
                e.preventDefault();
                let $this = this;
                $this.form.validateFields((err, params) => {
                    if (!err){
                        login(params).then(res => {
                            //  保存token
                            $this.$store.commit('setAccessToken',res.data);
                            //  获取当前账号信息
                            getMyInfo().then(result => $this.$store.commit('setUserInfo',result.data));
                            //  从哪来,回哪去
                            $this.$router.push({ path : $this.callback }).then();
                        });
                    }
                });
            }
        }
    };
</script>
